<!DOCTYPE html>
<!-- <ui:composition template="/master.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:define name="content"> -->
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
<h:head>
</h:head>
	
<body>
	<h:form enctype="multipart/form-data">
		<p:wizard style="width:60%" nextLabel="Siguiente" backLabel="Atrás">
			<p:tab id="datos" title="Datos">
				<p:panel header="Datos del Presupuesto">
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputText value="Tipo de Evento:" />
						
						<p:selectOneMenu id="comboTipoEv"
									converter="tipoeventoConverter"
									value="#{presupuestoBean.tipoEventoSelected}" effect="fade"
									var="te">

									<f:selectItems var="tipoev"
										value="#{presupuestoBean.listTipoEvento}"
										itemLabel="#{tipoev.nombreTipoEvento}" itemValue="#{tipoev}" />
									<p:column>
										<h:outputText value="#{te.nombreTipoEvento}" />
									</p:column>
								</p:selectOneMenu>
					
						<h:outputText value="Fecha del Evento:" />
						<p:calendar id="fechaEvento" value="#{presupuestoBean.fechaEvento}"
							 navigator="true" locale="es" />
					</h:panelGrid>
					<br />
					<p:separator />
					<br />
					<h:panelGrid columns="2" cellpadding="3">

						<h:outputText value="Cantidad de Invitados:" />
						<p:spinner min="0" size="4" maxlength="4"/>
						<h:outputText value="Cantidad Mínima de Invitados:" />
						<p:spinner min="0" size="4" maxlength="4"/>
						<h:outputText value="Cantidad Máxima de Invitados:" />
						<p:spinner min="0" size="4" maxlength="4"/>
					</h:panelGrid>
				</p:panel>
			</p:tab>

			<p:tab id="menus" title="Menús">
				<p:panel header="Selección de Menú">

					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="label, value">

						<h:outputText value="Tipo de Menú:" />
						<p:selectOneMenu style="width:210px">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItem itemLabel="Option 1" itemValue="1" />
							<f:selectItem itemLabel="Option 2" itemValue="2" />
						</p:selectOneMenu>

						<h:outputText value="Clasificación:" />
						<p:selectOneMenu style="width:210px">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItem itemLabel="Option 1" itemValue="1" />
							<f:selectItem itemLabel="Option 2" itemValue="2" />
						</p:selectOneMenu>

						<h:outputText value="Menú:" />
						<p:selectOneMenu style="width:210px">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItem itemLabel="Option 1" itemValue="1" />
							<f:selectItem itemLabel="Option 2" itemValue="2" />
						</p:selectOneMenu>

						<h:outputText value="Cantidad:" />
						<p:spinner min="0" />
					</h:panelGrid>
					<br />
					<p:commandButton value="Agregar" icon="ui-icon-disk" />
					<br />

					<p:separator id="separatorTipoEvento" />

					<br />


					<p:dataTable var="" value="" rows="5" scrollable="true"
						editable="true" style="width:100%">

						<p:column headerText="Tipo de Menú">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="Entrada" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="tipoMenuInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Clasificación">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="Vegetariano" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="calsifInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Menú">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="Ensalada Mixta" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="menuInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Cantidad">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="4" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="cantidadInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>

						<p:column headerText="Modificar"
							style="width:70px;text-align: center">
							<p:rowEditor />
						</p:column>

						<p:column style="width:70px;text-align: center"
							headerText="Eliminar">
							<p:commandButton update="" oncomplete="" icon="ui-icon-close"
								title="View">
								<f:setPropertyActionListener value="" target="" />
								<p:confirm header="Confirmation" message="Are you sure?"
									icon="ui-icon-alert" />
							</p:commandButton>

							<p:confirmDialog global="true" showEffect="fade"
								hideEffect="fade">
								<p:commandButton value="Yes" type="button"
									styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
								<p:commandButton value="No" type="button"
									styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>

						</p:column>
					</p:dataTable>

				</p:panel>
			</p:tab>

			<p:tab id="bebidas" title="Bebidas">
				<p:panel header="Selección de Combo de Bebidas">
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="label, value">

						<h:outputText value="Combo de Bebida:" />
						<p:selectOneMenu style="width:210px">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItem itemLabel="Option 1" itemValue="1" />
							<f:selectItem itemLabel="Option 2" itemValue="2" />
						</p:selectOneMenu>

						<h:outputText value="Cantidad:" />
						<p:spinner min="0" />
					</h:panelGrid>
					<br />
					<p:commandButton value="Agregar" icon="ui-icon-disk" />
					<br />

					<p:separator id="separatorComboBebida" />

					<br />

					<p:dataTable var="" value="" rows="5" scrollable="true"
						editable="true" style="width:100%">

						<p:column headerText="Combo">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="Bebidas con alcohol nacionales" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="bebidasInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Cantidad">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="100" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="cantidadfInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>

						<p:column headerText="Modificar"
							style="width:70px;text-align: center">
							<p:rowEditor />
						</p:column>

						<p:column style="width:70px;text-align: center"
							headerText="Eliminar">
							<p:commandButton update="" oncomplete="" icon="ui-icon-close"
								title="View">
								<f:setPropertyActionListener value="" target="" />
								<p:confirm header="Confirmation" message="Are you sure?"
									icon="ui-icon-alert" />
							</p:commandButton>

							<p:confirmDialog global="true" showEffect="fade"
								hideEffect="fade">
								<p:commandButton value="Yes" type="button"
									styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
								<p:commandButton value="No" type="button"
									styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>

						</p:column>
					</p:dataTable>

					<br />
					<p:selectBooleanCheckbox />
					<p:spacer width="5px"></p:spacer>
					<p:outputLabel value="Bebida a cargo del interesado." />

				</p:panel>
			</p:tab>

			<p:tab id="servicios" title="Servicios">
				<p:panel header="Selección de Combo de Bebidas">
					<h:panelGrid columns="2" cellpadding="3"
						columnClasses="label, value">

						<h:outputText value="Servicio:" />
						<p:selectOneMenu id="comboSevicio"
									converter="tipoeventoConverter"
									value="#{presupuestoBean.tipoEventoSelected}" effect="fade"
									var="te">

									<f:selectItems var="tipoev"
										value="#{presupuestoBean.listTipoEvento}"
										itemLabel="#{tipoev.nombreTipoEvento}" itemValue="#{tipoev}" />
									<p:column>
										<h:outputText value="#{te.nombreTipoEvento}" />
									</p:column>
								</p:selectOneMenu>

						<h:outputText value="Proveedor:" />
						<p:selectOneMenu style="width:210px">
							<f:selectItem itemLabel="Select One" itemValue="" />
							<f:selectItem itemLabel="Option 1" itemValue="1" />
							<f:selectItem itemLabel="Option 2" itemValue="2" />
						</p:selectOneMenu>

						<p:outputLabel value="Nombre:" />
						<p:outputLabel value="......." />

						<p:outputLabel value="Descripción:" />
						<p:outputLabel value="......." />
					</h:panelGrid>

					<br />
					<p:outputLabel value="Galeria de Fotos:" />
					<br />
					<p:galleria value="#{imagesView.images}" var="image"
						panelWidth="400" panelHeight="213" showCaption="false">
						<p:graphicImage />
					</p:galleria>

					<br />
					<p:separator id="separatorServicios1" />
					<br />
					<h:panelGrid columns="2">
						<p:panel header="Tabla" style="width:550px;height: 170px;">
							<p:dataTable var="" value="" rows="5" scrollable="true"
								editable="true" style="width:100%">
								<p:column headerText="Promoción">
									<h:outputText value="Promo 1" />
								</p:column>
								<p:column headerText="Importe">
									<h:outputText value="$$$" />
								</p:column>
							</p:dataTable>
						</p:panel>
						<p:panel header="Descripción" style="width:280px;height: 170px;">
							
						</p:panel>
					</h:panelGrid>
					
					<br />
					<p:commandButton value="Agregar" icon="ui-icon-disk" />
					<br />

					<p:separator id="separatorServicios2" />

					<br />

					<p:dataTable var="" value="" rows="5" scrollable="true"
						editable="true" style="width:100%">

						<p:column headerText="Servicio">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="servicioInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Proveedor">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="proveedorInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Promoción">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="promoInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Importe">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="" />
								</f:facet>
								<f:facet name="input">
									<p:inputText id="importeInput" value="" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>

						<p:column headerText="Modificar"
							style="width:70px;text-align: center">
							<p:rowEditor />
						</p:column>

						<p:column style="width:70px;text-align: center"
							headerText="Eliminar">
							<p:commandButton update="" oncomplete="" icon="ui-icon-close"
								title="View">
								<f:setPropertyActionListener value="" target="" />
								<p:confirm header="Confirmation" message="Are you sure?"
									icon="ui-icon-alert" />
							</p:commandButton>

							<p:confirmDialog global="true" showEffect="fade"
								hideEffect="fade">
								<p:commandButton value="Yes" type="button"
									styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
								<p:commandButton value="No" type="button"
									styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>

						</p:column>
					</p:dataTable>
				</p:panel>
			</p:tab>
			
			<p:tab id="conf" title="Confirmación">
				<p:panel header="Confirmación de Datos">
					
				</p:panel>
			</p:tab>
		</p:wizard>
	</h:form>
	
	<script type="text/javascript">
		PrimeFaces.locales["es"] = {
			closeText : "Cerrar",
			prevText : "Anterior",
			nextText : "Siguiente",
			monthNames : [ "Enero", "Febrero", "Marzo", "Abril", "Mayo",
					"Junio", "Julio", "Agosto", "Septiembre", "Octubre",
					"Noviembre", "Diciembre" ],
			monthNamesShort : [ "Ene", "Feb", "Mar", "Abr", "May", "Jun",
					"Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ],
			dayNames : [ "Domingo", "Lunes", "Martes", "Miércoles", "Jueves",
					"Viernes", "Sábado" ],
			dayNamesShort : [ "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab" ],
			dayNamesMin : [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
			weekHeader : "Semana",
			firstDay : 0,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : "",
			timeOnlyTitle : "Solo hora",
			timeText : "Tiempo",
			hourText : "Hora",
			minuteText : "Minuto",
			secondText : "Segundo",
			currentText : "Fecha actual",
			ampm : false,
			month : "Mes",
			week : "Semana",
			day : "Día",
			allDayText : "Todo el día"
		};
	</script>
	
	</body>
	</html>
	<!-- </ui:define>
</ui:composition> -->
